<template>
	<view class="content">
		<image class="banner" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20201221/a0638ab0-4368-11eb-9d11-37443b4692d4.png"></image>
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in tabList[active].list">
				<view class="user-info">
					<image class="head-img" v-if="item.randomNum === 0" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/70d4ee60-6456-11eb-bca5-ff4c25daddae.jpeg"></image>
					<image class="head-img" v-if="item.randomNum === 1" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/7b828b10-6456-11eb-bfc5-ab5f95308cd3.jpeg"></image>
					<image class="head-img" v-if="item.randomNum === 2" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/823f8ca0-6456-11eb-a6a8-bbdbb6e4c59d.jpeg"></image>
					<image class="head-img" v-if="item.randomNum === 3" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/9ea0de80-6456-11eb-856a-6b1a9257794a.jpeg"></image>
					<image class="head-img" v-if="item.randomNum === 4" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/a44a7440-6456-11eb-a67e-35e24bed7974.jpeg"></image>
					<image class="head-img" v-if="item.randomNum === 5" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210201/aa5c8fd0-6456-11eb-856a-6b1a9257794a.jpeg"></image>
					<view class="right">
						<view class="user-name">好物推荐官</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
				</view>
				<view class="goods-desc">{{ item.desc }}</view>
				<view class="goods-image" v-if="item.taobaoImage">
					<template v-for="(img, imgIndex) in item.taobaoImage.split(',')">
						<image class="image" :src="img" v-if="imgIndex < 4" @tap="previewImg(item.taobaoImage.split(','), imgIndex)"></image>
					</template>
				</view>
				<view class="goods-name">{{ item.title }}</view>
				<view class="price-sale">
					<view class="price">权益价：<text class="end-price">¥{{ (parseFloat(item.endPrice || 0) -  parseFloat(item.tljMoney || 0)).toFixed(2) }}</text><text class="old-price">{{ item.price }}</text></view>
					<view class="sale">已抢{{ item.sale }}件</view>
				</view>
				<view class="coupon-zan">
					<view class="coupon-tlj">
						<view class="coupon">
							<view class="title">补贴券</view>
							<view class="circle"></view>
							<view class="money">¥{{ item.couponMoney }}</view>
						</view>
						<view class="tlj">
							<view class="title">权益金</view>
							<view class="circle"></view>
							<view class="money">¥{{ item.tljMoney }}</view>
						</view>
					</view>
					<view class="zan" @tap="likeGoods(item)">
						<image class="image" src="@/static/images/icon/zan.png" v-if="item.isLiked === 0"></image>
						<image class="image" src="@/static/images/icon/zan-active.png" v-else></image>
						{{ parseInt(item.basicLikeNum) > 999 ? '999+' : item.basicLikeNum }}
					</view>
				</view>
				<view class="buy-btn" @tap="optimizedGoodsBuy(item)">立抢省¥{{ (Number(item.couponMoney) + Number(item.tljMoney)).toFixed(2) }}</view>
			</view>

			<!-- 商品骨架 -->
			<template v-for="i in ['a', 'b', 'c', 'd']">
				<view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
					<skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
				</view>
			</template>
		</view>

		<!-- 加载中插件 -->
		<view class="load-status">
			<load-more status="loading" color="#FFFFFF" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
					   :contentText="contentText"></load-more>
			<load-more status="noMore" color="#FFFFFF" v-if="tabList[active].finished" :contentText="contentText"></load-more>
			<empty v-if="tabList[active].empty" color="#FFFFFF"></empty>
		</view>

		<!-- 回到顶部 -->
		<view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
			<text class="iconfont icon-huidaodingbu"></text>
		</view>

		<!-- 查看大图 -->
		<popup ref="previewPopup" @touchmove.stop.prevent>
			<view class="preview-popup" @tap="$refs.previewPopup.close()">
				<text class="iconfont icon-left" @tap="$refs.previewPopup.close()"></text>
				<view class="banner">
					<swiper
						class="swiper"
						:autoplay="false"
						:indicator-dots="false"
						:current="current"
						@change="changeSwiper"
					>
						<swiper-item v-for="item in imgList">
							<view class="img-box">
							    <image class="image" mode="widthFix" :src="item"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="index">{{ current + 1 }}/{{ imgList.length }}</view>
				</view>
			</view>
		</popup>
		
		<!-- 快捷登录 -->
		<authorize ref="authorize"></authorize>
	</view>
</template>

<script>
	import Empty from "@/components/Empty";
	import Authorize from '@/components/Authorize';
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import loader from '@/utils/mixin/loader';
	import Popup from '@/components/uni/Popup';
	export default {
		name: "index",
		mixins: [loader],
		components: {
			LoadMore,
			Empty,
			Skeleton,
			Popup,
			Authorize
		},
		data() {
			return {
				imgList: [],
				current: 0
			}
		},
		onLoad() {
			uni.hideTabBarRedDot({ index: 1 });
			this.initPage();
		},
		onShow() {
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 15 });
		},
		methods: {
			initPage() {
				uni.showLoading({
					title: '加载中...'
				});
				this.loadMore(this.tabList[this.active]);
			},
			beforeLoader() {
				this.params.type = 11;
				this.params.isBybt = true;
				this.service = this.$service.common.step.goodsList(this.params);
				return true;
			},
			afterLoader() {
				this.tabList[this.active].list.forEach(item => {
					item.randomNum = Math.floor(0 + Math.random() * (6));
				})
			},
			previewImg(list, index) {
				this.imgList = list;
				this.current = index;
				this.$refs.previewPopup.open()
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			likeGoods(item) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				if (item.isLiked === 1) {
					return false;
				}
				item.isLiked = 1;
				item.basicLikeNum = parseInt(item.basicLikeNum) + 1;
				this.$service.common.step.likeGoods({
					id: item.id,
					gid: item.gid,
					isBybt: true
				});
				this.$forceUpdate();

				uni.reportAnalytics('click_dianzan_icon', {
					click_dianzan_icon: 1
				});
			},
			optimizedGoodsBuy(item) {
				if (!uni.getStorageSync('stepToken')) {
					this.$refs.authorize.open();
					return false;
				}
				uni.showLoading({
					title: '加载中...'
				});
				let params = {
					mdGoodId: item.id,
					type: item.type,
					isBybt: true
				};
				this.$service.common.step.optimizedGoodsBuy(params).then(res => {
					uni.hideLoading();
					let tkl = null;
					if (res.tkl) {
						tkl = res.tkl;
					} else {
						tkl = res;
					}
					uni.showToast({
						title: '领取成功，请尽快使用权益',
						icon: 'none'
					});
					setTimeout(() => {
						my.navigateToMiniProgram({
							appId: '2018091261350219',
							path: `/pages/h5pages/h5pages?targetURI=${tkl}`
						});
					}, 2000);
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})

				uni.reportAnalytics('click_lingqubtj', {
					click_lingqubtj: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #FF3226;
		.banner {
			width: 750rpx;
			height: 235rpx;
		}
		.goods-list {
			padding: 0 20rpx;
			.goods-item {
				padding: 32rpx 28rpx;
				background: #fff;
				border-radius: 12rpx;
				font-size: 32rpx;
				color: #333333;
				margin-top: 20rpx;
				.user-info {
					@include flexBox(flex-start, center);
					.head-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.right {
						margin-left: 16rpx;
						.date {
							color: #787878;
							margin-top: 10rpx;
							font-size: 28rpx;
						}
					}
				}
				.goods-desc {
					margin: 20rpx 0;
					font-size: 29rpx;
					line-height: 36rpx;
					@include ellipsis(3);
				}
				.goods-image {
					.image {
						width: 240rpx;
						height: 240rpx;
						margin-right: 20rpx;
					}
				}
				.goods-name {
					margin: 20rpx 0;
					font-size: 29rpx;
					line-height: 40rpx;
					// @include ellipsis(1);
				}
				.price-sale {
					@include flexBox(space-between, center);
					.price {
						color: #787878;
						font-size: 28rpx;
						.end-price {
							color: #FE5134;
							font-size: 44rpx;
						}
						.old-price {
							color: #787878;
							text-decoration: line-through;
							margin-left: 20rpx;
						}
					}
					.sale {
						color: #787878;
						font-size: 28rpx;
					}
				}
				.coupon-zan {
					margin-top: 20rpx;
					@include flexBox(space-between, center);
					.coupon-tlj {
						@include flexBox(flex-start, center);
						.title {
							font-size: 24rpx;
							height: 32rpx;
							padding: 0 10rpx;
						}
						.circle {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50rpx;
							background: #fff;
							margin-left: -5rpx;
						}
						.money {
							font-size: 24rpx;
							padding: 0 10rpx 0 5rpx;
						}
						.coupon {
							height: 32rpx;
							border: 2rpx solid #FE5134;
							@include flexBox(flex-start, center);
							.title {
								background: #FE5134;
								color: #fff;
							}
							.money {
								color: #FE5134;
							}
						}
						.tlj {
							height: 32rpx;
							border: 2rpx solid #FFDEA7;
							margin-left: 30rpx;
							@include flexBox(flex-start, center);
							.title {
								background: #FFDEA7;
								color: #925114;
							}
							.money {
								color: #925114;
							}
						}
					}
					.zan {
						font-size: 28rpx;
						color: #333;
						@include flexBox(center, flex-end);
						.image {
							width: 44rpx;
							height: 44rpx;
							margin-right: 10rpx;
						}
					}
				}
				.buy-btn {
					width: 652rpx;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					margin: 30rpx auto 0;
					color: #fff;
					border-radius: 50rpx;
					font-size: 32rpx;
					background: linear-gradient(140deg, #FF4D4F 0%, #FE5134 100%);
				}
			}
			.skeleton-wrap {
				background: #fff;
				width: 704rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 16rpx;
			}
		}
		.preview-popup {
			width: 750rpx;
			height: 100vh;
			background: #000;
			position: relative;
			z-index: 1000;
			@include flexBox(center, center);
			.icon-left {
				font-size: 40rpx;
				color: #fff;
				position: fixed;
				left: 26rpx;
				top: 40rpx;
			}
			.banner {
				width: 750rpx;
				height: 800rpx;
				.swiper {
					width: 750rpx;
					height: 750rpx;
					.img-box {
						width: 750rpx;
						height: 750rpx;
						.image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.index {
					width: 100%;
					color: #fff;
					text-align: center;
					font-size: 36rpx;
					margin: 20rpx 0;
				}
			}
		}
	}
</style>
